<html>
<head>
  <title>Video Extension Demo</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
  <link rel="icon" type="image/png" href="../../iui-favicon.png">
  <link rel="apple-touch-icon" href="../../iui-logo-touch-icon.png" />
  <meta name="apple-mobile-web-app-capable" content="no" />
  <link rel="stylesheet" href="../../iui.css" type="text/css" />
  <link rel="stylesheet" title="Default" href="../../t/default/default-theme.css"  type="text/css"/>
  <link rel="stylesheet" href="../../../css/iui-panel-list.css" type="text/css" />
  <link rel="stylesheet" href="iui-video.css" type="text/css" />

  <script type="application/x-javascript" src="../../iui.js"></script>	
  <script type="application/x-javascript" src="iui-video.js"></script>
  <script type="application/x-javascript" src="iui-video-logger.js"></script>
	<link href="../TbBMod/xtra.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="toolbar" id="toolbar">
	<h1 id="pageTitle"></h1>
	<a id="backButton" class="button" href="#"></a>
</div>

<ul id="home" title="Video Ext" selected="true">
	<li><a href="#about">About Video Ext</a></li>
	<li><a href="#instructions">Instructions</a></li>
	<li class="group">Video Views ("Pages")</li>
	<li><a href="#video1">Video 1</a></li>
	<li><a href="#video2">Video 2</a></li>
	<li><a href="#video3">Video 1 Dynamic</a></li>
	<li><a href="#video4">Video 2 Dynamic</a></li>
</ul>





<div id="about" class="panel" title="About">
  <h2>About Video Extension</h2>
	<fieldset>
	<p class="normalText">iui-video.js is an extension for the iUI framework. It is currently EXPERIMENTAL</p>
	<p class="normalText">For info on how to use this extension see Instructions.</p>
	<p class="normalText">Sean Gilligan</p>
	</fieldset>
</div>


<div id="instructions" class="panel" title="Instructions">
  <h2>Video Ext - instructions for use.</h2>
	<fieldset>
	<p class="normalText">The Video Extension is easy to install into your iUI powered web app. It requires no changes to existing iUI components. Start by linking the iui-video.js to your main index file just like the you would iui.js.</p>
	<p class="normalText">You can now place compatible HTML5 video in iUI "pages".</p>
	<p class="normalText">Use the following markup for each iUI view ("page") that contains a video:</p>
</fieldset>
<fieldset>
	<p class="code">&lt;div id="video1" &gt;</p>
	<p class="code">&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;path/to/video.mp4&quot; target="_self" rel="iuiposter" &gt;</p>
	<p class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;path/to/poster.jpg&quot; width="nnn" height="mmm" /&gt; </p>
	<p class="code">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;</p>
	<p class="code">&lt;/div&gt;</p>
</fieldset>
<fieldset>
	<p class="normalText">The Video Extension will automatically create a video tag and play the video when the iUI view (aka "page") is active.</p>
</fieldset>
</div>

<div id="video1" title="Video 1">
  <video class="video-out" src="http://pb.vlogcentral.com/movies/27654.3gp" width="320" height="240" poster="http://pb.vlogcentral.com/movies/12061.jpg" ></video>
  <a href="http://pb.vlogcentral.com/movies/27654.3gp" target="_self" rel="iuiposter">
    <img src="http://pb.vlogcentral.com/movies/12061.jpg" width="320" height="240" />
  </a>
</div>  

<div id="video2" title="Video 2">
  <video src="http://pb.vlogcentral.com/movies/73767.3gp" width="320" height="240" poster="http://pb.vlogcentral.com/movies/73610.jpg" ></video>
  <a href="http://pb.vlogcentral.com/movies/73767.3gp" target="_self" rel="iuiposter">
    <img src="http://pb.vlogcentral.com/movies/73610.jpg" width="320" height="240" />
  </a>
</div>  

<div id="video3" title="Video 1 Dynamic">
  <a href="http://pb.vlogcentral.com/movies/27654.3gp" target="_self" rel="iuiposter">
    <img src="http://pb.vlogcentral.com/movies/12061.jpg" width="320" height="240" />
  </a>
</div>  

<div id="video4" title="Video 2 Dynamic">
  <a href="http://pb.vlogcentral.com/movies/73767.3gp" target="_self" rel="iuiposter">
    <img src="http://pb.vlogcentral.com/movies/73610.jpg" width="320" height="240" />
  </a>
</div>  

</body>
</html>
